import React, { createContext, Component } from 'react'

const colorContext = createContext()

const { Provider, Consumer: ColorConsumer } = colorContext

class ColorProvider extends Component {
  state = {
    color: this.props.color
  }

  changeColor = color => {
    return () => {
      this.setState({
        color
      })
    }
  }

  render() {
    return (
      <Provider value={{
        color: this.state.color,
        changeColor: this.changeColor
      }}>
        {this.props.children}
      </Provider>
    )
  }
}

export {
  ColorProvider,
  ColorConsumer
}